<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>在线购物商城</title>
<link rel="stylesheet" href="/css/bootstrap.css" />
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/iconfont/iconfont.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/zshop.js"></script>
</head>

<body>
	<div id="wrapper">
		<!-- navbar start -->
		<div class="navbar navbar-default clear-bottom">
			<div class="container">
				<div class="navbar-header">
					<a class="navbar-brand logo-style"
						href="/http://edu.51cto.com/center/lec/info/index?user_id=12392007">
						<img class="brand-img" src="/images/com-logo1.png" alt="logo"
						height="70">
					</a>
				</div>
				<div class="collapse navbar-collapse"
					id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">商城主页</a></li>
						<li><a href="myOrders.html">我的订单</a></li>
						<li><a href="cart.html">购物车</a></li>
						<li class="dropdown"><a href="center.html">会员中心</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#" data-toggle="modal" data-target="#loginModal">登陆</a>
						</li>
						<li><a href="#" data-toggle="modal"
							data-target="#registModal">注册</a></li>
						<li class="userName">
							<div th:if=${session.so!=null}>
								<span th:text=${session.so.login_name}></span>
							</div>
							<div th:if=${session.so==null}>
								您好：<span>未登录</span>
							</div>

						</li>
						<li class="dropdown"><a href="#"
							class="dropdown-toggle user-active" data-toggle="dropdown"
							role="button"> <img class="img-circle"
								src="/images/user.jpeg" height="30" /> <span class="caret"></span>
						</a>
							<ul class="dropdown-menu">
								<li><a data-toggle="modal"
									data-target="#modifyPasswordModal"> <i
										class="glyphicon glyphicon-cog"></i>修改密码
								</a></li>
								<li><a th:href=@{/customer/loginout}> <i class="glyphicon glyphicon-off"></i>
										退出
								</a></li>
							</ul></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- navbar end -->
		<!-- content start -->
		<div class="container">
			<div class="row">
				<div class="col-xs-12">
					<div class="page-header" style="margin-bottom: 0px;">
						<h3>商品列表</h3>
					</div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-xs-12">
					<form class="form-inline hot-search">
						<div class="form-group">
							<label class="control-label">商品：</label> <input type="text"
								class="form-control" placeholder="商品名称">
						</div>
						&nbsp;
						<div class="form-group">
							<label class="control-label">价格：</label> <input type="text"
								class="form-control" placeholder="最低价格"> -- <input
								type="text" class="form-control" placeholder="最高价格">
						</div>
						&nbsp;
						<div class="form-group">
							<label class="control-label">种类：</label> <select
								class="form-control input-sm">
								<option value="all" selected="selected">查询全部</option>
								<option value="grade">饮料</option>
								<option value="course">零食</option>
							</select>
						</div>
						&nbsp;
						<div class="form-group">
							<button type="button" class="btn btn-warning">
								<i class="glyphicon glyphicon-search"></i> 查询
							</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class="content-back">
			<div class="container" id="a">
				<div class="row">
					<div class="col-xs-3  hot-item">
						<div class="panel clear-panel">
							<div class="panel-body">
								<div class="art-back clear-back">
									<div class="add-padding-bottom">
										<img src="/images/shop2.jpg" class="shopImg">
									</div>
									<h4>
										<a href="">秋冬新款韩版</a>
									</h4>
									<div class="user clearfix pull-right">￥128.00</div>
									<div class="desc">平时穿也不会显得夸张，很大方洋气
										我已经自留了，还和小姐妹准备人手一件圣诞节穿着出去玩！ 经典的圆领，大气休闲，长袖设计，休闲舒适
										宽松的版型，怕冷可以里面穿保暖衣）</div>
									<div class="attention pull-right">
										加入购物车 <i class="icon iconfont icon-gouwuche"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-xs-3  hot-item">
						<div class="panel clear-panel">
							<div class="panel-body">
								<div class="art-back clear-back">
									<div class="add-padding-bottom">
										<img src="/images/shop1.jpg" class="shopImg">
									</div>
									<h4>
										<a href="">连衣裙</a>2
									</h4>
									<div class="user clearfix pull-right">￥5.00</div>
									<div class="desc">
										工厂自产自销质量保证,拍下有运费险不合适，不满意，不喜欢7天无理由退换！下单送钥匙扣小礼物，全场满1件-包邮，注明：小礼物(钥匙扣）
									</div>
									<div class="attention pull-right">
										加入购物车 <i class="icon iconfont icon-gouwuche"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-xs-3  hot-item">
						<div class="panel clear-panel">
							<div class="panel-body">
								<div class="art-back clear-back">
									<div class="add-padding-bottom">
										<img src="/images/shop4.jpg" class="shopImg">
									</div>
									<h4>
										<a href="">时尚套装女</a>
									</h4>
									<div class="user clearfix pull-right">￥200.00</div>
									<div class="desc">冬款韩版新款毛领连帽棉服外套牛仔裤两件套时尚套装女</div>
									<div class="attention pull-right">
										加入购物车 <i class="icon iconfont icon-gouwuche"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-xs-3  hot-item">
						<div class="panel clear-panel">
							<div class="panel-body">
								<div class="art-back clear-back">
									<div class="add-padding-bottom">
										<img src="/images/shop3.jpg" class="shopImg">
									</div>
									<h4>
										<a href="">小脚裤套装</a>
									</h4>
									<div class="user clearfix pull-right">￥49.00</div>
									<div class="desc">新款大毛领加绒加厚牛仔棉衣羊羔毛短外套 休闲 时尚 百搭</div>
									<div class="attention pull-right">
										加入购物车 <i class="icon iconfont icon-gouwuche"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-xs-3  hot-item">
						<div class="panel clear-panel">
							<div class="panel-body">
								<div class="art-back clear-back">
									<div class="add-padding-bottom">
										<img src="/images/shop5.jpg" class="shopImg">
									</div>
									<h4>
										<a href="">高腰牛仔裤三件套</a>
									</h4>
									<div class="user clearfix pull-right">￥210.00</div>
									<div class="desc">这款棉马甲推荐给妹子们，立领的设计， 马甲款式，面料是比较好的羽绒棉，
										上身软软的很舒服~单排扣金属衣门襟， 两个插袋设计，实用又比较保暖~ 经典百搭的颜色色，里面配卫衣或者毛衣，都灰常好看~</div>
									<div class="attention pull-right">
										加入购物车 <i class="icon iconfont icon-gouwuche"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-xs-3  hot-item">
						<div class="panel clear-panel">
							<div class="panel-body">
								<div class="art-back clear-back">
									<div class="add-padding-bottom">
										<img src="/images/shop6.jpg" class="shopImg">
									</div>
									<h4>
										<a href="">仿皮草短款外套</a>
									</h4>
									<div class="user clearfix pull-right">￥210.00</div>
									<div class="desc">颜色无色差，质感好，百搭 2017冬季新款小香风淑女韩东大门女装毛毛外套</div>
									<div class="attention pull-right">
										加入购物车 <i class="icon iconfont icon-gouwuche"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-xs-3  hot-item">
						<div class="panel clear-panel">
							<div class="panel-body">
								<div class="art-back clear-back">
									<div class="add-padding-bottom">
										<img src="/images/shop7.jpg" class="shopImg">
									</div>
									<h4>
										<a href="">内搭背心</a>
									</h4>
									<div class="user clearfix pull-right">￥210.00</div>
									<div class="desc">
										加绒保暖塑身，效果很好哦，告别臃肿的体态，买一件修正身形的内衣背心很有必要，关键价格白菜</div>
									<div class="attention pull-right">
										加入购物车 <i class="icon iconfont icon-gouwuche"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-xs-3  hot-item">
						<div class="panel clear-panel">
							<div class="panel-body">
								<div class="art-back clear-back">
									<div class="add-padding-bottom">
										<img src="/images/shop8.jpg" class="shopImg">
									</div>
									<h4>
										<a href="">短款外套</a>
									</h4>
									<div class="user clearfix pull-right">￥210.00</div>
									<div class="desc">杭产品质，质量OK 支持退换送运费险，购买无忧</div>
									<div class="attention pull-right">
										加入购物车 <i class="icon iconfont icon-gouwuche"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- content end-->
		<!-- footers start -->
		<div class="footers">版权所有：南京网博</div>
		<!-- footers end -->
	</div>

	<!-- 修改密码模态框 start -->
	<div class="modal fade" id="modifyPasswordModal" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">修改密码</h4>
				</div>
				<form th:action="@{/customer/modify}" class="form-horizontal" method="post">

                    <div th:if=${session.so!=null}>
                        <input type="text" name="id"  th:value="${session.so.id}" >
                    </div>
                    <div th:if=${session.so==null}>
                        <input type="text" name="id" >
                    </div>
					<div class="modal-body">
						<div class="form-group">
							<label class="col-sm-3 control-label">原密码：</label>
							<div class="col-sm-6">
								<input class="form-control" type="password">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">新密码：</label>
							<div class="col-sm-6">
								<input class="form-control" type="password">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">重复密码：</label>
							<div class="col-sm-6">
								<input class="form-control" type="password" name="password">
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-warning" data-dismiss="modal"
							aria-label="Close">关&nbsp;&nbsp;闭</button>
						<button type="reset" class="btn btn-warning">重&nbsp;&nbsp;置</button>
						<button type="submit" class="btn btn-warning">修&nbsp;&nbsp;改</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- 修改密码模态框 end -->

	<!-- 登录模态框 start  -->
	<div class="modal fade" id="loginModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<!-- 用户名密码登陆 start -->
			<div class="modal-content" id="login-account">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">用户名密码登录</h4>
				</div>
				
				<form th:action="@{/customer/login}" class="form-horizontal"
					method="post">
					<div class="modal-body">
						<div class="form-group">
							<label class="col-sm-3 control-label">用户名：</label>
							<div class="col-sm-6">
								<input class="form-control" type="text" placeholder="请输入用户名"
									name="login_name">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
							<div class="col-sm-6">
								<input class="form-control" type="password" placeholder="请输入密码"
									name="password">
							</div>
						</div>
					</div>
					<div class="modal-footer" style="text-align: center">
						<a class="btn-link">忘记密码？</a> &nbsp;
						<button type="button" class="btn btn-warning" data-dismiss="modal"
							aria-label="Close">关&nbsp;&nbsp;闭</button>
						<button type="submit" class="btn btn-warning">登&nbsp;&nbsp;陆</button>
						&nbsp;&nbsp; <a class="btn-link" id="btn-sms-back">短信快捷登录</a>
					</div>
				</form>
			</div>
			<!-- 用户名密码登陆 end -->
			<!-- 短信快捷登陆 start -->
			<div class="modal-content" id="login-sms" style="display: none;">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">短信快捷登陆</h4>
				</div>
				<form class="form-horizontal" method="post">
					<div class="modal-body">
						<div class="form-group">
							<label class="col-sm-3 control-label">手机号：</label>
							<div class="col-sm-6">
								<input class="form-control" type="text" placeholder="请输入手机号">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">验证码：</label>
							<div class="col-sm-4">
								<input class="form-control" type="text" placeholder="请输入验证码">
							</div>
							<div class="col-sm-2">
								<button class="pass-item-timer" type="button">发送验证码</button>
							</div>
						</div>
					</div>
					<div class="modal-footer" style="text-align: center">
						<a class="btn-link">忘记密码？</a> &nbsp;
						<button type="button" class="btn btn-warning" data-dismiss="modal"
							aria-label="Close">关&nbsp;&nbsp;闭</button>
						<button type="submit" class="btn btn-warning">登&nbsp;&nbsp;陆</button>
						&nbsp;&nbsp; <a class="btn-link" id="btn-account-back">用户名密码登录</a>
					</div>
				</form>
			</div>
			<!-- 短信快捷登陆 end -->
		</div>
	</div>
	<!-- 登录模态框 end  -->

	<!-- 注册模态框 start -->
	<div class="modal fade" id="registModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">会员注册</h4>
				</div>
				<form th:action="@{/customer/regist}" class="form-horizontal"
					method="post">
					<div class="modal-body">
						<div class="form-group">
							<label class="col-sm-3 control-label">用户姓名:</label>
							<div class="col-sm-6">
								<input class="form-control" type="text" name="name">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">登陆账号:</label>
							<div class="col-sm-6">
								<input class="form-control" type="text" name="login_name">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">登录密码:</label>
							<div class="col-sm-6">
								<input class="form-control" type="password" name="password">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">联系电话:</label>
							<div class="col-sm-6">
								<input class="form-control" type="text" name="phone">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">联系地址:</label>
							<div class="col-sm-6">
								<input class="form-control" type="text" name="address">
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-warning" data-dismiss="modal"
							aria-label="Close">关&nbsp;&nbsp;闭</button>
						<button type="reset" class="btn btn-warning">重&nbsp;&nbsp;置</button>
						<button type="submit" class="btn btn-warning">注&nbsp;&nbsp;册</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- 注册模态框 end -->
</body>

</html>